<template>
  <div class="app-container">
    <div style="margin-bottom: 6px; text-align: center">
      <el-input
        v-model="cdtName"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="顾客姓名"
        size="small"
      />
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="searchClerk"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        icon="el-icon-refresh"
        size="small"
        @click="resetClerk"
      >
        重置
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        label="状态"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-tag size="mini" :type="row.status | statusFilter">
            {{ row.status | statusFilter2 }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="80"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="clickDetail(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="ccode"
        label="客户编号"
        align="center"
        width="170"
      />
      <el-table-column prop="cname" label="姓名" align="center" width="150" />
      <el-table-column
        prop="sex"
        label="性别"
        align="center"
        width="50"
        :formatter="sexf"
      />
      <el-table-column
        prop="tel"
        label="电话"
        align="center"
        width="110"
        show-overflow-tooltip
      />
      <el-table-column
        prop="solar"
        label="阳历出生日期"
        align="center"
        width="130"
      />
      <el-table-column
        prop="lunar"
        label="阴历出生日期"
        align="center"
        width="140"
      />
      <el-table-column
        prop="btime"
        label="出生时间"
        align="center"
        width="80"
      />
      <el-table-column
        prop="city"
        label="出生地"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="creator"
        label="创建人"
        align="center"
        width="110"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sname"
        label="店名"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="报告"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            v-show="row.status == 1"
            :href="'/customreport/' + row.id + '.pdf'"
            target="_blank"
            type="primary"
            >终极</el-link
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      class="my-dialog-header"
      width="1200px"
      :visible.sync="dialogFormVisible"
      style="margin-top: -130px"
    >
      <el-form
        ref="dataForm"
        :model="clerk"
        label-width="0px"
        style="margin-left: 0px"
      >
        <el-form-item>
          <el-col :span="8">
            <div class="my-div">
              <el-row :gutter="20" style="margin-bottom: 20px">
                <el-col :span="10"
                  ><div
                    style="
                      color: #409eff;
                      font-weight: bolder;
                      font-size: 30px;
                      text-align: center;
                    "
                  >
                    详情
                  </div></el-col
                >
                <el-col :span="14" />
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">姓名：</div></el-col
                >
                <el-col :span="14">{{ clerk.cname }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">性别：</div></el-col
                >
                <el-col :span="14">{{ clerk.sex === 0 ? '男' : '女' }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">阳历：</div></el-col
                >
                <el-col :span="14">{{ clerk.solar }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">阴历：</div></el-col
                >
                <el-col :span="14">{{ clerk.lunar }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">出生时间：</div></el-col
                >
                <el-col :span="14">{{ clerk.btime }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">出生城市：</div></el-col
                >
                <el-col :span="14">{{ clerk.city }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">住址：</div></el-col
                >
                <el-col :span="14">{{ clerk.address }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">电话：</div></el-col
                >
                <el-col :span="14">{{ clerk.tel }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">需求主诉：</div></el-col
                >
                <el-col :span="14">{{ clerk.demand }}</el-col>
              </el-row>
              <el-divider />
              <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="10"
                  ><div class="my-div-attr">所属店铺：</div></el-col
                >
                <el-col :span="14">{{ clerk.sname }}</el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div class="my-div-attr">店铺编码：</div></el-col
                >
                <el-col :span="14">{{ clerk.code }}</el-col>
              </el-row>
              <el-row :gutter="20" style="margin-bottom: 20px">
                <el-col :span="10"
                  ><div class="my-div-attr">开发人员：</div></el-col
                >
                <el-col :span="14">{{ clerk.developer }}</el-col>
              </el-row>
              <el-divider />
              <el-row
                :gutter="20"
                style="margin-top: 20px; margin-bottom: 10px"
              >
                <el-col :span="4"
                  ><div
                    style="
                      font-size: small;
                      text-align: right;
                      font-weight: bold;
                      color: #409eff;
                    "
                  >
                    点石：
                  </div></el-col
                >
                <el-col :span="20">
                  <el-input
                    v-model="clerk.reportds"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请填写"
                  />
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4"
                  ><div
                    style="
                      font-size: small;
                      text-align: right;
                      font-weight: bold;
                      color: #409eff;
                    "
                  >
                    点睛：
                  </div></el-col
                >
                <el-col :span="20">
                  <el-input
                    v-model="clerk.reportdj"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请填写"
                  />
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="1"><p /></el-col>
          <el-col :span="15">
            <el-row style="line-height: 10px">
              <el-col :span="4" style="color: #dcdfe6; text-align: center"
                >日期</el-col
              >
              <el-col :span="5" style="color: #dcdfe6">年柱</el-col>
              <el-col :span="5" style="color: #dcdfe6">月柱</el-col>
              <el-col :span="5" style="color: #dcdfe6">日柱</el-col>
              <el-col :span="5" style="color: #dcdfe6">时柱</el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="color: #dcdfe6; text-align: center"
                >主星</el-col
              >
              <el-col :span="5" style="font-size: large">{{
                clerk.ngx
              }}</el-col>
              <el-col :span="5" style="font-size: large">{{
                clerk.ygx
              }}</el-col>
              <el-col :span="5" style="font-size: large">{{
                clerk.rgx
              }}</el-col>
              <el-col :span="5" style="font-size: large">{{
                clerk.sgx
              }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="color: #dcdfe6; text-align: center"
                >天干</el-col
              >
              <el-col :span="5">
                <el-tag
                  :type="getTagType(clerk.ngz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.ngz.charAt(0) }}
                </el-tag>
              </el-col>
              <el-col :span="5">
                <el-tag
                  :type="getTagType(clerk.ygz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.ygz.charAt(0) }}
                </el-tag>
              </el-col>
              <el-col :span="5">
                <el-tag
                  :type="getTagType(clerk.rgz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.rgz.charAt(0) }}
                </el-tag>
              </el-col>
              <el-col :span="5">
                <el-tag
                  v-if="clerk.sgz"
                  :type="getTagType(clerk.sgz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.sgz.charAt(0) }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="color: #dcdfe6; text-align: center"
                >地支</el-col
              >
              <el-col :span="5">
                <el-tag
                  :type="getTagType(clerk.nzz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.nzz.charAt(0) }}
                </el-tag>
              </el-col>
              <el-col :span="5">
                <el-tag
                  :type="getTagType(clerk.yzz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.yzz.charAt(0) }}
                </el-tag>
              </el-col>
              <el-col :span="5">
                <el-tag
                  :type="getTagType(clerk.rzz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.rzz.charAt(0) }}
                </el-tag>
              </el-col>
              <el-col :span="5">
                <el-tag
                  v-if="clerk.szz"
                  :type="getTagType(clerk.szz)"
                  effect="dark"
                  style="font-size: x-large"
                >
                  {{ clerk.szz.charAt(0) }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="color: #dcdfe6; text-align: center"
                >副星</el-col
              >
              <el-col :span="5" style="font-size: large">{{
                clerk.nzx
              }}</el-col>
              <el-col :span="5" style="font-size: large">{{
                clerk.yzx
              }}</el-col>
              <el-col :span="5" style="font-size: large">{{
                clerk.rzx
              }}</el-col>
              <el-col :span="5" style="font-size: large">{{
                clerk.szx
              }}</el-col>
            </el-row>
            <el-divider />

            <el-row style="line-height: 20px">
              <div class="dndList">
                <div style="width: 48%" class="dndList-list">
                  <h3>客户属性</h3>
                  <draggable
                    :set-data="setData"
                    :list="userlist"
                    group="article"
                    class="dragArea"
                  >
                    <div
                      v-for="element in userlist"
                      :key="element.id"
                      class="list-complete-item"
                    >
                      <div class="list-complete-item-handle">
                        {{ element.fxxm }}
                      </div>
                      <div style="position: absolute; right: 0px">
                        <span
                          style="
                            float: right;
                            margin-top: -20px;
                            margin-right: 5px;
                          "
                          @click="deleteEle(element)"
                        >
                          <i style="color: #ff4949" class="el-icon-delete" />
                        </span>
                      </div>
                    </div>
                  </draggable>
                </div>
                <div style="width: 48%" class="dndList-list">
                  <h3>备选属性</h3>
                  <draggable
                    :list="optionlist"
                    group="article"
                    class="dragArea"
                  >
                    <div
                      v-for="element in optionlist"
                      :key="element.id"
                      class="list-complete-item"
                    >
                      <div
                        class="list-complete-item-handle2"
                        @click="pushEle(element)"
                      >
                        {{ element.fxxm }}
                      </div>
                    </div>
                  </draggable>
                </div>
              </div>
            </el-row>
          </el-col>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="updateData()"> 出报告 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBaseInfo } from '@/api/base'
import { getClerkList, setReport, getWxTenGod, getSomeClerk } from '@/api/txs'
import draggable from 'vuedraggable'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'

export default {
  components: { draggable, Pagination },
  filters: {
    statusFilter (status) {
      const statusMap = {
        1: 'success',
        0: 'warning'
      }
      return statusMap[status]
    },
    statusFilter2 (status) {
      return status === 0 ? '初版报告' : '终极报告'
    }
  },
  data () {
    return {
      cdtName: '',
      total: 0,
      listQuery: {
        page: 1,
        limit: 12
      },

      wxtengod: new Map(),
      userlist: [],
      optionlist: [],
      base0: [],
      base1: [],

      dialogFormVisible: false,
      clerk: {
        id: undefined,
        sid: undefined,
        pic: '',
        status: 0,
        sex: 1,
        tel: '',
        post: '',
        solar: '',
        lunar: '',
        btime: '',
        city: '',
        ccode: '',
        cname: '',
        ngz: '',
        ngx: '',
        ygz: '',
        ygx: '',
        rgz: '',
        rgx: '',
        sgz: '',
        sgx: '',
        nzz: '',
        nzx: '',
        yzz: '',
        yzx: '',
        rzz: '',
        rzx: '',
        szz: '',
        szx: '',
        report: '',
        reportds: '',
        reportdj: '',
        // createTime: new Date(),
        code: '',
        sname: '',
        address: '',
        developer: '',
        gzn: '',
        gzy: '',
        gzr: ''
      },
      list: null,
      listLoading: true
    }
  },
  computed: {
    ...mapGetters(['id', 'deptId'])
  },
  created () {
    this.fetchData()
    this.getList()
  },
  methods: {
    searchClerk () {
      if (this.cdtName === '') {
        this.listQuery = this.$options.data().listQuery
        this.getList()
      } else {
        this.listLoading = true
        getSomeClerk('', this.cdtName, '', '', this.id, this.deptId)
          .then(res => {
            this.list = res.data.data
            this.total = 0
            this.listLoading = false
          })
          .catch(() => {
            this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
              type: 'error',
              confirmButtonText: '确定'
            })
          })
      }
    },
    resetClerk () {
      this.cdtName = ''
      this.listQuery = this.$options.data().listQuery
      this.getList()
    },
    getList () {
      this.listLoading = true
      getClerkList(this.listQuery.page, this.listQuery.limit, this.deptId, this.id, '0').then(res => {
        this.list = res.data.data.records
        this.total = res.data.data.total
        this.listLoading = false
      })
    },
    sexf (row) {
      return row.sex === 0 ? '男' : '女'
    },
    fetchData () {
      getBaseInfo('0').then(response => {
        this.base0 = response.data.data
      })
      getBaseInfo('1').then(response => {
        this.base1 = response.data.data
      })
    },
    clickDetail (row) {
      this.wxtengod = new Map()
      this.userlist = []
      this.optionlist = []
      this.dialogFormVisible = true
      this.clerk = Object.assign({}, row)
      if (!this.clerk.report || this.clerk.report.length === 0) {
        this.$alert('该客户信息异常，请及时联系系统管理员', '系统错误', {
          type: 'error',
          confirmButtonText: '确定',
          callback: _ => {
            this.dialogFormVisible = false
          }
        })
        return
      }

      getWxTenGod(this.clerk.rgz.charAt(1)).then(res => {
        this.wxtengod = res.data.data
      })

      const baselist = this.clerk.sex === 0 ? this.base0 : this.base1
      const lst = this.clerk.report.split(',')
      baselist.forEach((o, i) => {
        if (lst.includes(o.id + '')) {
          this.userlist.push(o)
        } else if (!o.tag || o.tag.length === 0) {
          this.optionlist.push(o)
        }
      })
    },
    updateData () {
      if (this.userlist.length === 0) {
        this.$alert('请为客户选择属性，否则无法生成报告！', '错误操作', {
          type: 'error',
          confirmButtonText: '确定'
        })
        return
      }

      const clerkid = this.clerk.id
      const str = this.userlist
        .map(item => {
          return item.id
        })
        .join(',')
      setReport(
        clerkid,
        str,
        this.clerk.sname,
        this.clerk.reportds,
        this.clerk.reportdj
      )
        .then(_ => {
          const clk = this.list.find(c => c.id === clerkid)
          clk.report = str
          clk.status = 1
          clk.reportdj = this.clerk.reportdj
          clk.reportds = this.clerk.reportds
          const index = this.list.findIndex(c => c.id === clerkid)
          this.list.splice(index, 1, clk)
          this.dialogFormVisible = false
          // 跳转到pdf
          // window.open('/customreport/' + clerkid + '.pdf', '_blank')
        })
        .catch(() => {
          this.$alert('生成报告时出错，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
    },
    setData (dataTransfer) {
      dataTransfer.setData('Text', '')
    },
    isNotInOptionList (v) {
      return this.optionlist.every(k => v.id !== k.id)
    },
    isNotInUserList (v) {
      return this.userlist.every(k => v.id !== k.id)
    },
    deleteEle (ele) {
      for (const item of this.userlist) {
        if (item.id === ele.id) {
          const index = this.userlist.indexOf(item)
          this.userlist.splice(index, 1)
          break
        }
      }
      if (this.isNotInOptionList(ele)) {
        this.optionlist.push(ele)
      }
    },
    pushEle (ele) {
      let wx_key = ''
      if (ele.fxxm.includes('A【用神】首要用“火”')) {
        wx_key = '火'
      } else if (ele.fxxm.includes('A【用神】首要用“金”')) {
        wx_key = '金'
      } else if (ele.fxxm.includes('A【用神】首要用“木”')) {
        wx_key = '木'
      } else if (ele.fxxm.includes('A【用神】首要用“水”')) {
        wx_key = '水'
      } else if (ele.fxxm.includes('A【用神】首要用“土”')) {
        wx_key = '土'
      }
      for (const item of this.optionlist) {
        if (item.id === ele.id) {
          const index = this.optionlist.indexOf(item)
          this.optionlist.splice(index, 1)
        } else if (wx_key !== '') {
          const wx_my = this.clerk.rgz.charAt(1)
          const wx_ys = '用神是“' + this.wxtengod[wx_key]

          if (wx_my === wx_key) {
            // 同
            if (item.fxxm.includes('用神是“比')) {
              if (this.isNotInUserList(item)) {
                this.userlist.push(item)
              }
              const index = this.optionlist.indexOf(item)
              this.optionlist.splice(index, 1)
            }
          } else {
            // 非同
            if (item.fxxm.includes(wx_ys)) {
              if (this.isNotInUserList(item)) {
                this.userlist.push(item)
              }
              const index = this.optionlist.indexOf(item)
              this.optionlist.splice(index, 1)
            }
          }
        }
      }
      if (this.isNotInUserList(ele)) {
        this.userlist.push(ele)
      }
    },
    getTagType (tag) {
      if (tag) {
        const s = tag.charAt(1)
        if (s === '金') {
          return 'warning'
        }
        if (s === '木') {
          return 'success'
        }
        if (s === '水') {
          return ''
        }
        if (s === '火') {
          return 'danger'
        }
        if (s === '土') {
          return 'info'
        }
      }
    }
  }
}
</script>
<style lang="scss">
.my-dialog-header {
  .el-dialog__header {
    padding: 20px 0px 0px;
  }
  .el-dialog__body {
    padding: 20px 20px 0px 20px;
  }
  .el-dialog__footer {
    padding: 0px 20px 20px;
  }
}
</style>
<style lang="scss" scoped>
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0 0 0;
}
.dndList {
  background: #fff;
  padding-bottom: 0px;
  &:after {
    content: '';
    display: table;
    clear: both;
  }
  .dndList-list {
    float: left;
    padding-bottom: 0px;
    &:first-of-type {
      margin-right: 2%;
    }
    .dragArea {
      margin-top: 15px;
      min-height: 50px;
      padding-bottom: 0px;
    }
  }
}

.list-complete-item {
  cursor: pointer;
  position: relative;
  font-size: 14px;
  padding: 0px 12px;
  margin-top: 0px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
}

.list-complete-item-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 50px;
}

.list-complete-item-handle2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
}

.list-complete-item.sortable-chosen {
  background: #4ab7bd;
}

.list-complete-item.sortable-ghost {
  background: #30b08f;
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
.my-div {
  font-size: larger;
  .my-div-attr {
    text-align: right;
    font-weight: bold;
  }
}
</style>
